<template>
    <div class="exam-result-page">
        <div class="nav">
            <van-nav-bar fixed title="考试结果" left-text="返回" right-text="" left-arrow @click-left="$router.go(-1)"/>
        </div>
        <div class="examinfo-list">
            <div class="exam-info" v-for="(item,index) in examInfoList" :key="index"
             @click="lookDetail(item.examTimes)">
                <div class="exam-title">
                    <div class="exam-times">第{{item.examTimes}}次</div>
                    <div class="exam-num">题量:{{item.problemNum}}</div>
                    <div class="exam-date">测试时间:{{item.startTime}}</div>
                </div>
                <div class="exam-content">
                    <div class="exam-basic">
                        <div class="exam-type">{{item.problemType}}</div>
                        <div class="exam-duration">{{item.examDuration}}</div>
                    </div>
                    <div class="exam-score">
                        {{item.score}}<sub>分</sub>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, Toast } from 'vant';
import axios from 'axios'
import transfer from '../../utils/index'


Vue.use(NavBar);
Vue.use(Toast);

export default {
     // 组件创建前事件
    beforeMount: function(){
        Date.prototype.format = transfer.format
        this.$store.state.isShow = false
        this.getExamInfo()
    },
    data() {
        return {
            examInfoList: []
        }
    },
    methods: {
        // 获取所有考试详情信息
        getExamInfo: function(){
            Toast.loading({
                message: '加载题库中...',
                forbidClick: true,
                duration: 0
            });
            axios.post('/api/exam/allexam').then(res=>{
                Toast.clear()
                if(res.data.code == 1100){
                    // 获取数据成功
                    let examInfoList = res.data.data
                    examInfoList.forEach(v=>{
                        v.problemType = this.resolvePromTypesArr(v.problemType)
                        v.examDuration = this.transferSecToMin(v.examDuration )
                        v.startTime = new Date( Date.parse(v.startTime )).format('yyyy-MM-dd hh:mm:ss')
                    })
                    this.examInfoList = examInfoList
                } else {
                    // 获取数据失败
                    Toast(res.data.message)
                    if(res.data.code == 401){
                        localStorage.clear()
                        this.$router.push({path: '/login'})
                    }
                }
            }).catch(err=>{
                Toast(err)
            })
        },
        // 解析json数组形式的题目类型
        resolvePromTypesArr(types){
            let arr = JSON.parse(types)
            let resArr = []
            arr.forEach(v => {
                resArr.push(transfer.transferType(v))
            })
            return resArr.join(',')
        },
        // 将秒转换为 ?分?秒的形式
        transferSecToMin(sec){
            sec = parseInt(sec)
            let min = parseInt(sec / 60)
            let second = sec % 60
            return min+'分'+second+'秒'
        },
        // 查看详情页,examTimes->第几次考试信息
        lookDetail: function(examTimes){
            this.$router.push({path: `/examDetail/${examTimes}`})
        }
    }
    
}
</script>

<style lang="less" scoped>
.exam-result-page{
    background-color: #efefef;
    height: 100vh;
}
.nav{
     background: white;
     width: 100%;
     height: 47px;
     z-index: 9;
     border-bottom: 1px solid rgb(42, 202, 42);
     position: fixed;
     top: 0px;
     left: 0px;
}   
.examinfo-list{
    margin-top: 50px;
    padding: 10px;
    background-color: #efefef;
    > div:not(:first-child){
        margin-top: 20px;
    }
    .exam-info{
        width: 100%;
        height: 100px;
        background-color: #fff;
        border-radius: 5px ;
        .exam-title{
            border-radius: 5px 5px 0 0;
            background-color: rgb(42, 202, 42);
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-size: 14px;
            height: 30px;
            div{
                padding: 0 5px;
            }
            .exam-times{
                flex: 1;
                display: flex;
                justify-content: start;
                align-items: center;
            }
            .exam-num{
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .exam-date{
                flex: 3;
                text-align: right;
            }
        }
        .exam-content{
            position: relative;
            height: 70px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            .exam-basic{
                padding: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                .exam-type{
                    padding: 0 5px;
                    font-size: 18px;
                    color: black;
                }
                .exam-duration{
                    padding: 5px 5px 0 5px;
                    color: #777;
                }
            }
            .exam-score{
                font-size: 25px;
                padding: 10px;
                color:  rgb(42, 202, 42);
            }
        }
    }
}
</style>